<template>
    <view class="page_box bg-img">
        <u-navbar :is-back="true" title=" " v-if="1" :border-bottom="false" title-color="#fff" back-icon-color="#fff"></u-navbar>
        <button class="friendsInvited flex align-center justify-center cu-btn" @click="l.to('/pages/my/friendsInvited')">
            <text class="f28 ">邀请的好友</text>
        </button>

        <view class="w690 h662 info  padding-lg">
            <view class="flex align-center mt30 justify-between">
                <view class="flex flex-direction">
                    <view class="flex align-center">
                        <text class="c f28 text-bold">邀请规则</text>
                        <image
                            src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/20210617111926.png"
                            mode="aspectFill"
                            class="w20 h20 margin-left-xs"
                        ></image>
                    </view>
                    <text class="c mt40">1. 推广邀请注册分佣</text>
                    <text class="c mt30">2. 推荐好友报名活动分佣</text>
                    <text class="c mt30">3. 下级好友推广可得佣金</text>
                </view>
                <view class="solidd w240 h240 r20 flex align-center justify-center">
                    <view class="w200 h200 r10 bg-white flex align-center justify-center">
                        <i class="cuIcon-loading2 cuIconfont-pulse f85 text-yellow" v-if="!data.qrcode_image"></i>
                        <image :src="data.qrcode_image" mode="" class="w182 h182  " v-else></image>
                    </view>
                    <!-- <image :src="qrcode_image" mode="" class="w240 h240 bg-cyan"></image> -->
                </view>
            </view>
            <view class="mt68 flex align-center ">
                <view class="f-1 flex flex-direction  justify-between  h100">
                    <view class="flex">
                        <text class="ff text-white">我的上级</text>
                        <text class=" f26 text-white hidden block" style="width: 30vw;">: {{ data.parent_name ? data.parent_name : '暂无邀请人' }}</text>
                    </view>
                    <text>
                        <text class="ff  text-white">已邀请</text>
                        <text class="f26 text-white ">: {{ data.user_count ? data.user_count : 0 }}人</text>
                    </text>
                </view>
                <view class="f-1  flex flex-direction  justify-between h100 align-center">
                    <text class="f26 text-white">您的邀请码为：</text>
                    <text class="f36 text-bold  " style="color: #FFDE00;">{{ data.invite_code }}</text>
                </view>
            </view>
            <view class="mt40 flex justify-between ">
                <button class="cu-btn text-white flex align-center justify-center f30 w262 h90 btn" open-type="share"><text>邀请好友</text></button>
                <!-- <button class="cu-btn text-black flex align-center justify-center f30 w262 h90 btn" @click="sharePoster">
                    <text>生成海报</text>
                </button> -->
            </view>
        </view>
        <qrcode-poster ref="poster" :title="goods.title" :subTitle="goods.sub_title" :price="goods.price"></qrcode-poster>
        <yy-login v-if="vuex_login"></yy-login>
        <yy-loading text="加载中.." mask="true" click="true" ref="loading"></yy-loading>
        <u-toast ref="uToast" />
    </view>
</template>

<script>
import QrcodePoster from '@/components/zhangyu-qrcode-poster/zhangyu-qrcode-poster.vue';
import { pathToBase64, base64ToPath } from '../../common/js_sdk/mmmm-image-tools/index.js';
export default {
    components: {
        QrcodePoster,
    },
    data() {
        return {
            data: {},

            goods: {
                title: '尊享特权',
                sub_title: '九折优惠,免费品尝,推荐奖励,推一返三',
                //headerImg: 'https://oss.zhangyubk.com/%E8%8D%89%E8%8E%93%E5%8D%83%E5%B1%82.png',
                price: '',
            },
            qrcode_image: '',
        };
    },
    onShow() {},
    onLoad(e) {
        console.log('e :>> ', e);
        this.goods.price = e.card_now_price;
        this.myInvitation();
    },
    methods: {
        sharePoster() {
            uni.showLoading({
                title: '生成海报中...',
                mask: true,
            });
            base64ToPath(this.data.qrcode_image)
                .then(path => {
                    console.log(path);
                    this.is_show_model = false;
                    this.$refs.poster.showCanvas(path);
                })
                .catch(error => {
                    console.error(error);
                });
            //获取带参数二维码
        },
        async myInvitation() {
            let obj = {};
            const res = await this.$u.post('/UserInfo/inviteCenter', obj);

            this.data = res.data;
            // this.qrcode_image = res.data.qrcode_image
            console.log('res >>  ', res);
        },
    },
    onShareAppMessage() {
        //发送给朋友
        return {
            title:  this.data.invite_code + uni.getStorageSync('data').user.id ,
            path: '/pages/index/index?invite_code=' + this.data.invite_code + '&id=' +  uni.getStorageSync('data').user.id,
            imageUrl: this.data.image_url, //显示图片长宽比是 5:4
            success: function(res) {
                if (res.errMsg == 'shareAppMessage:ok') {
                    this.$refs.uToast.show({ title: '分享成功', type: 'success' });
                }
            },
        };
    },
};
</script>

<style lang="scss" scoped>
.page_box {
    width: 100vw;
    height: 100vh;
    background-image: url(https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/20210617110357.png);
    /deep/u-navbar {
        position: fixed;
        top: 0;
        transform: translateX(-50%);
        z-index: 99999;
        // background-color: transparent !important;
    }
    .friendsInvited {
        position: fixed;
        top: 320rpx;
        left: 0;
        width: 180rpx;
        height: 60rpx;
        background: #877ef5;
        border-radius: 0rpx 30rpx 30rpx 0rpx;
        color: #ffffff;
        text {
            white-space: nowrap;
        }
    }
    .btn {
        background: #ffc633;
        box-shadow: 0rpx 5rpx 0rpx 0rpx #dc6c1a;
        border-radius: 45rpx;
    }
    .ff {
        display: inline-block;
        font-size: 26rpx;
        width: 120rpx;
        text-align-last: justify;
    }
    .info {
        position: fixed;
        bottom: 143rpx;
        left: 50%;
        transform: translateX(-50%);
    }
    .c {
        color: #3f2498;
    }
    .solidd {
        border: 1rpx solid #ffffff;
    }
}

.content_box {
}
</style>
